<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>12306首页</title>
		<link rel="stylesheet" href="resources/layui/css/layui.css">
		<link rel="stylesheet" href="resources/css/homepage.css" />
		<script src="resources/js/jquery-3.7.1.min.js"></script>
		<script src="resources/layui/layui.js"></script>
		<style>
			.hidden {
				display: none;
			}

			.layui-btn {
				margin-top: 12px !important;
				width: 230px !important;
				height: 35px !important;
			}
		</style>
	</head>
	<body>
		<div>
			<div id="head12306"></div>
			<div class="slideshow">
				<div class="layui-carousel" id="test1">
					<div carousel-item>
						<div>
							<img src="https://www.12306.cn/index/images/pic/banner20200707.jpg" alt=""
								class="slideshow_img" />
						</div>
						<div>
							<img src="https://www.12306.cn/index/images/pic/banner26.jpg" alt=""
								class="slideshow_img" />
						</div>
						<div>
							<img src="https://www.12306.cn/index/images/pic/banner0619.jpg" alt=""
								class="slideshow_img" />
						</div>
						<div>
							<img src="https://www.12306.cn/index/images/pic/banner10.jpg" alt=""
								class="slideshow_img" />
						</div>
						<div>
							<img src="https://www.12306.cn/index/images/pic/banner12.jpg" alt=""
								class="slideshow_img" />
						</div>
						<div>
							<img src="https://www.12306.cn/index/images/pic/banner20201223.jpg" alt=""
								class="slideshow_img" />
						</div>
					</div>
				</div>
			</div>

			<div class="main-box">
				<div class="left">
					<ul>
						<li><a>车票</a></li>
						<li id="ys"><a>常用查询</a></li>
						<li style="background-color: #3b99fc !important;
	color: #fff !important;"><a>订餐</a></li>
					</ul>
				</div>

				<div class="right">
					<div class="right_1">
						<ul>
							<li id="one-way"><a href="javascript:;">
									<i class="layui-icon">&#xe609;</i>
									单程</a></li>
							<li id="round-trip"><a href="javascript:;">
									<i class="layui-icon">&#xe60c;</i>
									往返</a></li>
							<li id="transfer"><a href="javascript:;">
									<i class="layui-icon">&#xe642;</i>
									中转换乘</a></li>
							<li id="refund"><a href="javascript:;">
									<i class="layui-icon">&#xe69c;</i>
									退改签</a></li>
						</ul>
					</div>
					<div class="right_2">
						<form class="layui-form" action="">
							<div class="layui-form-item">
								<label class="layui-form-label">出发地</label>
								<div class="layui-input-block">
									<input type="text" name="from" required lay-verify="required" placeholder="简拼/全拼/汉字"
										autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">到达地</label>
								<div class="layui-input-block">
									<input type="text" name="to" required lay-verify="required" placeholder="简拼/全拼/汉字"
										autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">出发日期</label>
								<div class="layui-input-block">
									<input type="text" name="goDate" required lay-verify="required"
										placeholder="2025-03-04" autocomplete="off" class="layui-input" id="goDate">
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-input-block">
									<input type="checkbox" name="student" title="学生">
									<input type="checkbox" name="high_speed" title="高铁/动车">
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
								</div>
							</div>
						</form>
					</div>

					<div class="right_3 hidden">
						<!-- 往返内容 -->
						<form class="layui-form" action="">
							<div class="layui-form-item">
								<label class="layui-form-label">出发地</label>
								<div class="layui-input-block">
									<input type="text" name="from" required lay-verify="required" placeholder="简拼/全拼/汉字"
										autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">到达地</label>
								<div class="layui-input-block">
									<input type="text" name="to" required lay-verify="required" placeholder="简拼/全拼/汉字"
										autocomplete="off" class="layui-input">
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">出发日期</label>
								<div class="layui-input-block">
									<input type="text" name="departDate" required lay-verify="required"
										placeholder="请选择出发日期" autocomplete="off" class="layui-input" id="departDate">
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">返程日期</label>
								<div class="layui-input-block">
									<input type="text" name="returnDate" required lay-verify="required"
										placeholder="请选择乘车日期" autocomplete="off" class="layui-input" id="returnDate">
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-input-block">
									<input type="checkbox" name="student" title="学生">
									<input type="checkbox" name="high_speed" title="高铁/动车">
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
								</div>
							</div>
						</form>
					</div>


					<div class="right_4 hidden">
						<!-- 中转换乘表单内容 -->
						<form class="layui-form" action="">
							<div class="layui-form-item">
								<label class="layui-form-label">出发地</label>
								<div class="layui-input-block">
									<input type="text" name="from" required lay-verify="required" placeholder="简拼/全拼/汉字"
										autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">到达地</label>
								<div class="layui-input-block">
									<input type="text" name="to" required lay-verify="required" placeholder="简拼/全拼/汉字"
										autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">乘车日期</label>
								<div class="layui-input-block">
									<input type="text" name="carDate" required lay-verify="required"
										placeholder="请选择乘车日期" autocomplete="off" class="layui-input" id="carDate">
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
								</div>
							</div>
						</form>
					</div>

					<div class="right_5 hidden">
						<form class="layui-form" action="">
							<!-- 查询类型 -->
							<div class="layui-form-item">
								<label class="layui-form-label">查询类型</label>
								<div class="layui-input-block">
									<select name="queryType" lay-verify="required">
										<option value="">请选择查询类型</option>
										<option value="refund">退票</option>
										<option value="change">改签</option>
									</select>
								</div>
							</div>

							<!-- 开始日期 -->
							<div class="layui-form-item">
								<label class="layui-form-label">开始日期</label>
								<div class="layui-input-block">
									<input type="text" name="startDate" required lay-verify="required"
										placeholder="请选择开始日期" autocomplete="off" class="layui-input" id="startDate">
								</div>
							</div>

							<!-- 结束日期 -->
							<div class="layui-form-item">
								<label class="layui-form-label">结束日期</label>
								<div class="layui-input-block">
									<input type="text" name="endDate" required lay-verify="required"
										placeholder="请选择结束日期" autocomplete="off" class="layui-input" id="endDate">
								</div>
							</div>

							<!-- 关键字 -->
							<div class="layui-form-item">
								<label class="layui-form-label">关键字</label>
								<div class="layui-input-block">
									<input type="text" name="keyword" required lay-verify="required"
										placeholder="订单号/车次/乘客姓名" autocomplete="off" class="layui-input">
								</div>
							</div>

							<!-- 查询按钮 -->
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
								</div>
							</div>
						</form>
					</div>


				</div>
			</div>
		</div>

		<!-- 各种服务 -->
		<div class="gezhfw">
			<div class="gezhfw-1">
				<img src="resources/img/QQ图片20241008033756.jpg" width="36px" height="36px" class="ge-img" />
				<p>重点旅客预约</p>
			</div>
			<div class="gezhfw-1">
				<img src="resources/img/QQ图片20241008033844.jpg" width="36px" height="36px" class="ge-img" />
				<p>遗失物品查找</p>
			</div>
			<div class="gezhfw-1">
				<img src="resources/img/QQ图片20241008033854.jpg" width="36px" height="36px" class="ge-img" />
				<p>约车服务</p>
			</div>
			<div class="gezhfw-1">
				<img src="resources/img/QQ图片20241008033802.jpg" width="36px" height="36px" class="ge-img" />
				<p>便民托运</p>
			</div>
			<div class="gezhfw-1">
				<img src="resources/img/QQ图片20241008033839.jpg" width="36px" height="36px" class="ge-img" />
				<p>车站引导</p>
			</div>
			<div class="gezhfw-1">
				<img src="resources/img/QQ图片20241008033859.jpg" width="36px" height="36px" class="ge-img" />
				<p>站车风采</p>
			</div>
			<div class="gezhfw-1">
				<img src="resources/img/QQ图片20241008033847.jpg" width="36px" height="36px" class="ge-img" />
				<p>用户反馈</p>
			</div>
		</div>

		<!-- 各种图片 -->
		<div class="gezp">
			<ul>
				<li style="margin-left: -40px;margin-top: -16px;"><a title="铁路畅行 惠享出行 尊享体验"><img src="resources/img/abanner01.jpg"
							class="gezp-img" /></a></li>
				<li style="margin-left: 10px;margin-top: -16px;"><a title="餐饮·特产 带有温度的旅行配餐"><img src="resources/img/abanner02.jpg"
							class="gezp-img" /></a></li>
				<li style="margin-left: -40px;margin-top: 10px;"><a title="铁路保险 用心呵护 放心出行"><img src="resources/img/abanner05.jpg"
							class="gezp-img" /></a></li>
				<li style="margin-left: 10px;margin-top: 10px;"><a title="计次订票开售 直刷乘车、出行乐无忧"><img
							src="resources/img/abanner06.jpg" class="gezp-img" /></a></li>
			</ul>
		</div>
		<!-- 问题栏 -->
		<div class="wtlan">
			<div class="wtlan-1">
				<ul>
					<li>最新发布</li>
					<li id="wtlan-cl">常见问题</li>
					<li id="wtlan-cl2" style="background-color: #eaeaea; color: #666">信用信息</li>
				</ul>
			</div>
			<div class="wtlan-2">
				<ul class="wtlan-2-1">
					<li>
						<a>关于开展铁路旅客高铁宠物运输问卷调查的说明</a>
						<div class="shiji">2024-05-11</div>
					</li>
					<li>
						<a>外国护照身份核验使用说明</a>
						<div class="shiji">2023-12-13</div>
					</li>
					<li>
						<a>公 告</a>
						<div class="shiji">2022-12-22</div>
					</li>
					<li>
						<a>公 告</a>
						<div class="shiji">2022-12-22</div>
					</li>
					<li>
						<a>中国铁路上海局集团有限公司关于2024年10月8日增开部分...</a>
						<div class="shiji">2024-10-08</div>
					</li>
				</ul>
				<ul class="wtlan-2-1">
					<li>
						<a>关于优化铁路车票改签规则的公告</a>
						<div class="shiji">2024-01-11</div>
					</li>
					<li>
						<a>铁路旅客禁止、限制携带和托运物品目录</a>
						<div class="shiji">2023-11-30</div>
					</li>
					<li>
						<a>候补购票操作说明</a>
						<div class="shiji">2024-04-19</div>
					</li>
					<li>
						<a>关于调整互联网、电话订票起售时间的公告</a>
						<div class="shiji">2024-09-30</div>
					</li>
					<li>
						<a>中国铁路上海局集团有限公司关于2024年10月8日增开部分...</a>
						<div class="shiji">2024-10-08</div>
					</li>
				</ul>
				<div class="wtlan-3">更多>></div>
			</div>
		</div>
		<div id="footer"></div>


		<script src="resources/layui/layui.js"></script>
		<script>
			layui.use(['carousel', 'form', 'element', 'laydate'], function() {
				var carousel = layui.carousel;
				var element = layui.element;
				var form = layui.form;
				var laydate = layui.laydate;

				// 初始化组件
				element.init(); // 初始化导航组件
				form.render(); // 渲染表单

				//建造实例
				carousel.render({
					elem: '#test1',
					width: '100%', //设置容器宽度
					height: '100%', //设置容器高度
					arrow: 'none', //始终显示箭头
					indicator: 'inside', //取消指示器
					anim: 'default', //切换动画方式
					interval: '2000', //切换时间间隔

				});
				// 初始化日期选择器
				laydate.render({
					elem: '#goDate',    //单程出发日期
					type: 'date'
				});
				laydate.render({
					elem: '#departDate',    //出发日期
					type: 'date'
				});
				laydate.render({
					elem: '#returnDate',    //返程日期
					type: 'date'
				});
				laydate.render({
					elem: '#carDate',      //乘车日期
					type: 'date'
				});
				laydate.render({
				        elem: '#startDate', // 退改签开始日期
				        type: 'date'
				});
				laydate.render({
					elem: '#endDate',      //结束日期
					type: 'date'
				});

				function loadComponent(id, url) {
					$("#" + id).load(url);
				}
				loadComponent("head12306", "head_12306");
				loadComponent("footer", "footer");


				// 获取所有选项卡的 <li> 元素
				var oneWayLi = document.getElementById('one-way');
				var roundTripLi = document.getElementById('round-trip');
				var transferLi = document.getElementById('transfer');
				var refundLi = document.getElementById('refund');

				// 获取所有内容容器
				var right2 = document.querySelector('.right_2');
				var right3 = document.querySelector('.right_3');
				var right4 = document.querySelector('.right_4');
				var right5 = document.querySelector('.right_5');

				// 单程点击事件
				oneWayLi.addEventListener('click', function() {
					// 显示单程内容
					right2.classList.remove('hidden');
					right3.classList.add('hidden');
					right4.classList.add('hidden');
					right5.classList.add('hidden');

					// 切换样式
					oneWayLi.classList.add('active-tab');
					roundTripLi.classList.remove('active-tab');
					transferLi.classList.remove('active-tab');
					refundLi.classList.remove('active-tab');
				});

				// 往返点击事件
				roundTripLi.addEventListener('click', function() {
					// 显示往返内容
					right2.classList.add('hidden');
					right3.classList.remove('hidden');
					right4.classList.add('hidden');
					right5.classList.add('hidden');

					// 切换样式
					oneWayLi.classList.remove('active-tab');
					roundTripLi.classList.add('active-tab');
					transferLi.classList.remove('active-tab');
					refundLi.classList.remove('active-tab');
				});

				// 中转换乘点击事件
				transferLi.addEventListener('click', function() {
					// 显示中转换乘内容
					right2.classList.add('hidden');
					right3.classList.add('hidden');
					right4.classList.remove('hidden');
					right5.classList.add('hidden');

					// 切换样式
					oneWayLi.classList.remove('active-tab');
					roundTripLi.classList.remove('active-tab');
					transferLi.classList.add('active-tab');
					refundLi.classList.remove('active-tab');
				});

				// 退改签点击事件
				refundLi.addEventListener('click', function() {
					// 显示退改签内容
					right2.classList.add('hidden');
					right3.classList.add('hidden');
					right4.classList.add('hidden');
					right5.classList.remove('hidden');

					// 切换样式
					oneWayLi.classList.remove('active-tab');
					roundTripLi.classList.remove('active-tab');
					transferLi.classList.remove('active-tab');
					refundLi.classList.add('active-tab');
				});



				//监听提交
				form.on('submit(formDemo)', function(data) {
					console.log(data.field); // 获取表单数据
					$.ajax({
						url: '/homepage',
						type: 'post',
						data: {

						},
						success: function(response) {
							// 处理服务器返回的数据
							console.log(response)
							if (response.code == 200) {

								// 查询成功
								layer.msg('查询成功');

								// 跳转到首页或其他页面
							} else {
								// 登录失败
								layer.msg('查询失败');
							}
						},
						error: function() {
							layer.msg('请求失败，请稍后重试');
						}
					});
					return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
			});
		</script>
	</body>
</html>